<template>
  <div class="dateContent">
    <div style="margin-right: 10px">
      <a-radio-group :default-value="defaultValue" size="small" @change="radioChange">
        <a-radio-button value="1">
          今日
        </a-radio-button>
        <a-radio-button value="2">
          本周
        </a-radio-button>
        <a-radio-button value="3">
          本月
        </a-radio-button>
      </a-radio-group>
    </div>
    <div style="width: 262px">
      <a-range-picker v-model="dateRange" size="small" @change="onChange" />
    </div>
  </div>
</template>

<script>
import moment from 'dayjs'

export default {
  props: {
    defaultValue: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      dateRange: []
    }
  },
  methods: {
    moment,
    // 时间组件
    onChange(e) {
      const startDate = moment(e[0]).format('YYYY-MM-DD')
      const endDate = moment(e[1]).format('YYYY-MM-DD')
      this.$emit('getDateRange', [startDate, endDate])
      console.log(startDate, endDate, 'date change')
    },
    // 时间类型
    radioChange(e) {
      this.dateRange = []
      console.log(e, 'event - 时间类型切换')
      const type = e.target.value
      if (type === '2') {
        const start = moment().startOf('week').add(1, 'days').format('YYYY-MM-DD'); // 默认周日是一周的第一天，加1天改为周一
        const end = moment().endOf('week').add(1, 'days').format('YYYY-MM-DD');
        // console.log(start, end, '本周')
        this.$emit('getDateRange', [start, end])
      } else if (type === '3') {
        const start = moment().startOf('month').format('YYYY-MM-DD');
        const end = moment().endOf('month').format('YYYY-MM-DD');
        // console.log(start, end, '本月')
        this.$emit('getDateRange', [start, end])
      } else if (type === '1') {
        const start = moment().format('YYYY-MM-DD')
        const end = moment().format('YYYY-MM-DD')
        this.$emit('getDateRange', [start, end])
      }

    },
  }
}
</script>

<style lang="less" scoped>
.dateContent {
  display: flex;
  align-items: center;
  ::v-deep .ant-input {
    width: 262px;
    height: 28px;
    background: #f4f6f8;
    border: 0;
  }
  ::v-deep .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    border: 0;
    background: #f4f6f8;
    border-radius: 16px 16px 16px 16px;
  }
  ::v-deep .ant-radio-button-wrapper {
    border: 0;
    font-weight: bold;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    padding: 4px 16px;
    line-height: 15px;
  }
  ::v-deep .ant-radio-button-wrapper:not(:first-child)::before {
    background: transparent;
  }
}
</style>